<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输权限名称" clearable v-model="name" @clear="searchPermission">
            <el-button slot="append" icon="el-icon-search" @click="searchPermission"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click.prevent="dialogAddFormVisible=true">添加权限</el-button>
        </el-col>
      </el-row>
      <el-table :data="permissionList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="权限名称" prop="name"></el-table-column>
        <el-table-column label="权限路径" prop="url"></el-table-column>
        <el-table-column label="权限类型">
          <template slot-scope="sc">{{ sc.row.urlType === '1' ? '菜单权限' : '接口权限' }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removePermissionById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6 , 9, 12]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <el-dialog title="修改权限" :visible.sync="dialogUpdateFormVisible">
      <el-form :model="updateForm" :rules="rules" ref="updateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="updateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="权限url" prop="url">
          <el-input v-model="updateForm.url"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" prop="urlType">
          <el-select v-model="updateForm.urlType" placeholder="">
            <el-option label="菜单权限" value="1"></el-option>
            <el-option label="接口权限" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父菜单" prop="parentId">
          <el-select v-model="updateForm.parentId" placeholder="">
            <el-option label="一级菜单" :value="-1"></el-option>
            <el-option v-for="p in parentMenu" :label="p.name" :value="p.id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.prevent="updatePermission">修 改</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加权限" :visible.sync="dialogAddFormVisible">
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="权限url" prop="url">
          <el-input v-model="addForm.url"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" prop="urlType">
          <el-select v-model="addForm.urlType" placeholder="请选择权限类型">
            <el-option label="菜单权限" value="1"></el-option>
            <el-option label="接口权限" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父菜单" prop="parentId">
          <el-select v-model="addForm.parentId" placeholder="请选择父菜单">
            <el-option label="一级菜单" :value="-1"></el-option>
            <el-option v-for="p in parentMenu" :label="p.name" :value="p.id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false;$refs.addForm.resetFields()">取 消</el-button>
        <el-button type="primary" @click.prevent="addPermission">添 加</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogUpdateFormVisible: false,
      dialogAddFormVisible: false,
      parentMenu: [],

      pageNum: 1,
      pageSize: 3,
      permissionList: [],
      total: 0,
      name: "", //权限名称
      urlTypeDesc: "菜单权限",

      updateForm: {
        id: 0,
        name: '',
        url: '',
        urlType: '',
        parentId: 0
      },
      rules: {
        name: [
          {required: true, message: '请输入权限名称', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15个字符', trigger: 'blur'}
        ],
        parentId: [{required: true, message: '请选择父菜单', trigger: 'change'}],
        urlType: [{required: true, message: '请选择权限类型', trigger: 'change'}],
      },
      addForm: {
        id: 0,
        name: '',
        url: '',
        urlType: '',
        parentId: ''
      },
    };

  },
  methods: {
    addPermission() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          let url = this.$HRMSUrl  + "permission/addPermission";
          this.$axios.post(url, this.addForm)
              .then(resp => {
                console.log(resp)
                if (resp.data.code === 200) {
                  this.dialogAddFormVisible = false
                  this.reloadData()
                  this.$refs.addForm.resetFields()
                  this.$message({
                    type: 'success',
                    message: resp.data.msg,
                    duration: 1000

                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: resp.data.msg,
                    duration: 1000

                  })
                }
              })
        } else {
          return false
        }
      })
    },
    //修改权限信息
    updatePermission() {
      this.$refs.updateForm.validate(valid => {
        if (valid) {
          let url = this.$HRMSUrl  + "permission/updatePermission";
          this.$axios.put(url, this.updateForm)
              .then(resp => {
                console.log(resp)
                if (resp.data.code === 200) {
                  this.dialogUpdateFormVisible = false
                  this.$message({
                    type: 'success',
                    message: resp.data.msg,
                    duration: 1000

                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: resp.data.msg,
                    duration: 1000

                  })
                }
              })
        } else {
          return false
        }
      })
    },

    handleSizeChange(size) {
      this.pageSize = size
      this.reloadData()
    },
    handleCurrentChange(now) {
      this.pageNum = now
      this.reloadData()
    },
    searchPermission() {
      this.reloadData()
    },
    showEditDialog(obj) {
      this.dialogUpdateFormVisible = true
      this.updateForm = obj
    },
    removePermissionById(id) {
     if(confirm("确认删除权限吗？")){
       let url = this.$HRMSUrl + "permission/deletePermission";
       this.$axios.delete(url, {
         params: {
           id: id
         }
       })
           .then(resp => {
             console.log(resp)
             if (resp.data.code === 200) {
               this.reloadData()
               this.$message({
                 type: 'success',
                 message: resp.data.msg,
                 duration: 1000

               })
             } else {
               this.$message({
                 type: 'error',
                 message: resp.data.msg,
                 duration: 1000

               })
             }
           })
     }
    },
    //加载权限数据
    reloadData() {
      let url = this.$HRMSUrl  + "permission/listPermission";
      this.$axios.get(url, {
        params: {
          currentPage: this.pageNum,
          pageSize: this.pageSize,
          name: this.name
        }
      }).then(resp => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.permissionList = resp.data.data.list
          this.pageSize = resp.data.data.pageSize
          this.pageNum = resp.data.data.pageNum
          this.total = resp.data.data.total
        } else {
          this.$message({
            type: 'error',
            message: resp.data.msg,
            duration: 1000

          })
        }
      })
    },
    //加载父菜单数据
    loadParentMenu() {
      let url = this.$HRMSUrl  + "permission/loadParentMenu";
      this.$axios.get(url).then(resp => {
        console.log("pam" + resp)
        if (resp.data.code === 200) {
          console.log(resp)
          this.parentMenu = resp.data.data
        } else {
          this.$message({
            type: 'error',
            message: resp.data.msg,
            duration: 1000

          })
        }
      })
    }
  },
  created() {
    this.reloadData();
    this.loadParentMenu()
  }

}
</script>
<style lang="less" scoped>
</style>